<template>
    <div class="my">
        <div class="top">
            <router-link to="setUserInfo"><div class="seting">设置</div></router-link>
            <div class="login" @click="outLogin">注销</div>
        </div>
        <div class="buttom">
            <div class="user">
                <img class="userImg" :src="userImg"></img>
                <div class="nickName">{{userInfo.nickName}}</div>
            </div>
            <div class="list">
                <div class="userSeting">
                    <router-link to="/myself"><p>个人信息</p></router-link>
                </div>
                <div class="message">
                    <p>消息中心</p>
                </div>
                <div class="exam-center">
                    <p>考试中心</p>
                </div>
                <div class="about">
                    <p>关于我们</p>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
// 导入跳转方法
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import api from '../api/request';
import http from '../api/index';
const $router = useRouter()
// 导入提示
import { Dialog, showDialog, showToast } from 'vant';

// 用户信息
let userInfo= reactive({
    account:'',
    address:'',
    age:'',
    email:'',
    imgUrl:'',
    nickName:'',
    phone:'',
    sex:''
})
// 用户头像
let userImg = ref('')

// 拿到本地存储的token
let token = localStorage.getItem("token")
// 判断是否登录
if (token) {
    api.userInfo({token})
   .then(res => {
    if(res.code==200){
        // 接受到用户信息
        userInfo=res.rows
        // 拼接用户头像地址
        userImg.value=http.host+userInfo.imgUrl
    }
    else{
        showToast({
            message: '获取用户信息失败'
        })
    }
        
   })
   
}
else {
    // 未登录跳转到登录页
    showDialog({
        message: '您还没有登录，前往登录',
    }).then(() => {
        $router.replace({ path: '/login' })
    });
}


//   退出登录
const outLogin = () => {
    showDialog({
        message: '确认退出登录吗',
    }).then(() => {
        // 清除本地存储的token
        localStorage.removeItem("token")
        // 跳转到登录页
        $router.replace({ path: '/login' })
    });
}
</script>

<style lang="less" scoped>
@import url(../assets/appColor.less);
.my {
    width: 100%;
    .top {
        background: @bgcolor;
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: space-between;
        padding: 20px;

        .login {
            font-size: 25px;
            font-weight: bold;
        }

        .seting {
            font-size: 25px;
            font-weight: bold;
        }
    }

    .buttom {
        padding: 10px;
        width: 100%;
        height: 70%;

        .user {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: -70px;
            margin-bottom: 25px;

            .userImg {
                background-color: #ccc;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                margin-bottom: 10px;
            }

            .nickName {
                font-size: 22px;
                font-weight: bold;
            }
        }

        .list {
            >div {
                margin-bottom: 20px;

                display: flex;
                align-items: center;
                justify-content: space-between;
                // width: 90%;
                border-bottom: 1px solid #ccc;
                p {
                    font-size: 22px;
                    padding: 5px;
                }

            }

        }
    }
}
</style>